<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Title</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;

				.selected-container {
					width: 400px;
					height: 50px;
					border-radius: 6px;
					border: 1px solid #ccc;
					background-color: #cccccc90;
					position: relative;
					cursor: pointer;

					&:hover .selected-list-container {
						height: 200px;
						border: 1px solid #ccc;
					}
				}

				.selected-list-container {
					width: 400px;
					height: 0;
					border-radius: 6px;
					border: 0 solid #ccc;
					position: absolute;
					top: 55px;
					left: 0;
					background-color: #cccccc90;
					transition: all 1s;
					&:hover {
						/*background-color: #ffc0cb;*/
						background: linear-gradient(
							to right,
							#cccccc90 30%,
							#ffc0cb 100%
						);
					}
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="selected-container">
				<div class="selected-list-container"></div>
			</div>
		</div>
	</body>
</html>
